<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      max-height="308"
      style="width: 100%; --el-table-border-color: rgba(242, 243, 247, 0.6)"
      class="download_table mt-[12px]"
    >
      <el-table-column label="序号" min-width="80" align="center">
        <template #default="scope">
          <span v-if="!scope.row.isNull">{{ scope.$index }}</span>
          <span v-else>&nbsp;</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="pathName"
        label="附件名称"
        show-overflow-tooltip
        align="left"
        min-width="250"
        header-align="left"
        label-class-name="text_left"
      />
      <el-table-column label="操作" min-width="80" align="center">
        <template #default="scope">
          <span
            v-if="!scope.row.isNull"
            class="cursor-pointer download_text"
            @click="useDownloadUrl(scope.row.pathUrl, scope.row.pathName)"
            >下载</span
          >
          <span v-else>&nbsp;</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { useDownloadUrl } from "@/utils/useTable";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "1";
    },
  },
  // 整体曲线描述
  params: {
    type: Array,
    default: () => {
      return [
        {
          pathName: "logic-flow.txt",
          pathUrl: "test/info/1861638516140806144.txt",
        },
        {
          pathName: "No. 189, Grove St, Los Angeles",
          pathUrl: "CA 90036",
        },
        {
          pathName: "No. 189, Grove St, Los Angeles",
          pathUrl: "CA 90036",
        },
        {
          pathName: "No. 189, Grove St, Los Angeles",
          pathUrl: "CA 90036",
        },
        {
          pathName: "No. 189, Grove St, Los Angeles",
          pathUrl: "CA 90036",
        },
      ];
    },
  },
});
const { params } = toRefs(props);
const tableData = ref<any>([]);

// 监听数据变更
watch(
  () => params.value,
  (newVal) => {
    if (newVal.length < 7) {
      const num = 7 - newVal.length;
      const arr = JSON.parse(JSON.stringify(newVal));
      for (let i = 0; i < num; i++) {
        arr.push({
          isNull: true,
          pathName: "",
          pathUrl: "",
        });
      }
      tableData.value = arr;
    } else {
      tableData.value = newVal;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
:deep(.download_table) {
  .text_left {
    text-align: left !important;
  }
  thead {
    background: rgb(242, 243, 247);
    color: rgb(9, 30, 64);
    th.el-table__cell {
      font-weight: 400;
      padding: 9px 0;
    }
  }
  .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(242, 243, 247, 0.3);
  }
  .el-table__body td,
  .el-table .el-table__header th {
    border-color: rgba(242, 243, 247, 0.6); /* 例如: #ff0000 */
    color: #838a9d;
  }
  .el-table__cell {
    padding: 7px 0;
  }
  .download_text:hover {
    text-decoration: underline;
  }
  // border-color: rgba(242, 243, 247, 0.6);
}
</style>
